<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
	   margin: 0px;
	   padding: 0px;
	   text-decoration: none;
	}
	body{
		background-image: url("img/3.jpg");
		background-size: 100vw 100vh;
	}
	nav{
		display: inline-block;
		position: relative;
		width: 100vw;
		height: 10vh;
		position: fixed;
		z-index: 1;
		font-size: 1vw;
	}
	a{
		color:black;
	}
	a:hover{
		color:white;
	}
	#log{
		width:12vw;
		height: 100%;
		display: inline-block;
		position: relative;
		left: 15%;
	}
	#box{
		position: relative;
		top: 12vh;
		left: 15%;
		width: 70vw;
		height: 80vh;
	}
	#box div{
		position: relative;
		float: left;
		width: 32%;
		height: 45%;
		margin-left: 1%;
		margin-top: 2%;

	}
	.headImg{
		position: relative;
		left: 5%;
		top: 30%;
		height: 40%;
		width: 32%;
		border: solid 0.1vh rgb(245, 246, 250);
		border-radius: 10%;
	}
	.showText{
		position: relative;
		width: 60%;
		top: 45%;
		right: 2%;
		float: right;
		text-align: center;
	}
	.pageBar{
		position: absolute;
		margin-top: 5vh;
		left: 45%;
		width: 20%;
		height: 4%;
	}
	.pageBar a{
		border:0.1vh solid rgb(197, 197, 213);
	}
	.showText{
	    position:absolute;
	    top:7vh;
	    font-size:1.5vw;
	    right:11vw;
	}
</style>
<body>
	<nav>
		<img src="img/logo.png" alt="" id="log">
	</nav>
	<div id="box">
		<div id="b1">
			<img src="" alt="" class="headImg">
			<p class="showText">贴吧名</p>
		</div>
		<div id="b2">
			<img src="" alt="" class="headImg">
			<p class="showText">贴吧名</p>
		</div>
		<div id="b3">
			<img src="" alt="" class="headImg">
			<p class="showText">贴吧名</p>
		</div>
		<div id="b4">
			<img src="" alt="" class="headImg">
			<p class="showText">贴吧名</p>
		</div>
		<div id="b5">
			<img src="" alt="" class="headImg">
			<p class="showText">贴吧名</p>
		</div>
		<div id="b6">
			<img src="" alt="" class="headImg">
			<p class="showText">贴吧名</p>
		</div>
		
	</div>
	<div class="pageBar">
		
		</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
window.onload=function(){
	searchAllPlate(3,6);
}	
var currentPage;
	function searchAllPlate(pageNum,pageSize){
		$.ajax({
			type:"POST",
			url:"AllPlate.do",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				var plate = data.data;
				currentPage = data.pageNum;
				$("#b1").find("img").attr("src", plate[0].plateIconImg);
				$("#b1").find("p").text(plate[0].plateId+"."+plate[0].plateName);
				$("#b2").find("img").attr("src", plate[1].plateIconImg);
				$("#b2").find("p").text(plate[1].plateId+"."+plate[1].plateName); 
				$("#b3").find("img").attr("src", plate[2].plateIconImg);
				$("#b3").find("p").text(plate[2].plateId+"."+plate[2].plateName);
				$("#b4").find("img").attr("src", plate[3].plateIconImg);
				$("#b4").find("p").text(plate[3].plateId+"."+plate[3].plateName);
				$("#b5").find("img").attr("src", plate[4].plateIconImg);
				$("#b5").find("p").text(plate[4].plateId+"."+plate[4].plateName);
				$("#b6").find("img").attr("src", plate[5].plateIconImg);
				$("#b6").find("p").text(plate[5].plateId+"."+plate[5].plateName);
				makePageBar(data);
			}
		})
	}
	function makePageBar(data){
		$(".pageBar").empty();
		var totalPages = data.totalPages;
		var hasPrev = data.hasPrev;
		var hasNext = data.hasNext;
		var pageNum = data.pageNum;
		if(hasPrev){
			var $firstBtn = $("<a onclick='searchAllPlate(1,6)' href='javascript:void(0);'>首页</a>");
			var $prevBtn = $("<a onclick='searchAllPlate("+(pageNum-1)+",6)' href='javascript:void(0);'>上一页</a>");
			$(".pageBar").append($firstBtn).append($prevBtn);
		}
		
		for(var i =1; i<=totalPages;i++){
			var $pageBtn = $("<a onclick='searchAllPlate("+i+",6)' href='javascript:void(0);'></a>").text(i);
			$(".pageBar").append($pageBtn);
		}
		if(hasNext){
			var $lastBtn = $("<a onclick='searchAllPlate("+totalPages+",6)' href='javascript:void(0);'>尾页</a>");
			var $nextBtn = $("<a onclick='searchAllPlate("+(pageNum+1)+",6)' href='javascript:void(0);'>下一页</a>");
			$(".pageBar").append($nextBtn).append($lastBtn);
		}
	}

	var params=location.search.substring(1);
	$("#box div").not(".pageBar").click(function(event){
		window.location.href = 'index_palte.html?id='+$(this).text().substring(0,$(this).text().indexOf("."))+"&userId="+params.split("=")[1];
	})
	$("#log").click(function(event){
		window.location.href ="index.html?id="+params.split("=")[1] ;
	})
</script>
</html>